<template>
    <div class="top">
        <div class="left">
            <span>订单提交成功，请尽快付款！订单号:</span>
            <b style="color:red;">{{detail?.order_id}}</b>
        </div>
        <div class="total_fee">
            应付金额
            <b style="color:red;font-size:20px">
                {{detail?.total_fee}}
            </b>
            元
        </div>
    </div>
    <div class="payment">
        <div class="title">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wechat_pay">
                </use>
            </svg>
            <b>
                微信支付
            </b>
            <span>请使用微信扫码支付</span>
        </div>
        <div class="main">
            <div class="left">
                <div class="qrcode" v-loading="qrLoading">
                    <!-- 展示二维码的地方 -->
                    <img  :src="qrSrc" width="300" height="300" alt="">
                    <div class="pw-box-ft">
                        <div class="svg">
                            <svg class="icon">
                                <use xlink:href="#icon-weixin1"></use>
                            </svg>
                        </div>
                        <div class="qr-right">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">

            </div>
        </div>
        <el-descriptions title="订单信息">
            <el-descriptions-item label="创建时间">
                {{detail?.create_time}}
            </el-descriptions-item>
            <el-descriptions-item label="用户名">
                {{detail?.user_nickname}}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                {{detail?.user_phone}}
            </el-descriptions-item>
            <el-descriptions-item label="产品名称">
                {{detail?.orderDetail[0].productName}}
            </el-descriptions-item>
            <el-descriptions-item label="产品描述">
                {{detail?.orderDetail[0].description}}
            </el-descriptions-item>
            <el-descriptions-item label="收件地址">
                {{detail?.address}}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script setup>

import { useRoute,useRouter} from 'vue-router';
import * as api from "../../../../api/vip"
import { ElMessage } from 'element-plus';
import { onUnmounted } from 'vue';
import { ref } from 'vue';
// 引入生成二维码的库
import qr from "qrcode"
let route=useRoute()
let router=useRouter()
// 声明一个定时器
let timeout=null
// 1.发起请求，根据query传过来的order_id，获取订单详情
let {order_id}=route.query
// 声明响应式变量，存储订单的详情
let detail=ref()
// 储存二维码地址
let qrSrc=ref()
// 一个二维码展示的动画
let qrLoading=ref(false)
let getOrder=async()=>{
    qrLoading.value=true
    try{
        let res =await api.getOrderApi(order_id)
        // 订单状态order_status:订单状态：0未提交，1提交成功，2已经取消，3无效订单，4交易关闭，5退货
        // 也就意味着订单状态为1的时候才能发起支付
        // 获取订单状态
        let {order_status}=res.data.data
        detail.value=res.data.data
        if(!order_id){
            ElMessage({
                type:'error',
                message:'没有获取到订单id,2秒钟后返回充值界面'
            })
        }
        if(order_status===1){
            // 先从本地查询以下，这个订单有没有发起支付
            let code_url=localStorage.getItem(order_id)
            console.log(code_url,'asdasdasdas')
            console.log(1111)
            if(code_url){
                // 这个订单已经发起过支付，可能用户没有支付
                console.log(code_url)
                // 使用qrcode生成二维码
                qr.toDataURL(code_url,(err,url)=>{
                    if(err){
                        ElMessage.error(err.toString())
                        return
                    }
                    qrSrc.value=url
                    // 关掉加载动画
                    qrLoading.value=false
                })
                
            }else{
                try{
                let res=await api.payment(order_id)
                // 同一个订单不能频繁发起支付，所以可以使用订单的id作为key，支付的返回支付地址作为值，放到本地存储中
                localStorage.setItem(order_id,res.data.code_url)
                qr.toDataURL(res.data.code_url,(err,url)=>{
                    if(err){
                        ElMessage.error(err.toString())
                        return
                    }
                    qrSrc.value=url
                    // 关掉加载动画
                    qrLoading.value=false
                })
            }catch(e){
                console.log(e)
            }
            }
        }else{
            console.log(order_status)
            switch(order_status){
                case 0:
                    ElMessage({
                        type:'error',
                        message:"订单未提交,2秒钟后返回充值界面"
                        })
                        break;
                case 2:
                    ElMessage({
                        type:'error',
                        message:"订单已取消,2秒钟后返回充值界面"
                        })
                        break;
                case 3:
                    ElMessage({
                        type:'error',
                        message:"无效订单,2秒钟后返回充值界面"
                        })
                        break;
                case 4:
                    ElMessage({
                        type:'error',
                        message:"订单关闭,2秒钟后返回充值界面"
                        })
                break;
            }
            timeout=setTimeout(()=>{
                router.push('/vipManage/buyVip')
            },2000)
        }
        console.log(res)
    }catch(e){
        console.log(e)
    }
}
getOrder()

// 使用ajax轮询的方式，来查询支付状态
// 因为http的通信特性,服务端不能主动推送客户端
// 轮询:设定一个定时器,间隔性的发送请求,询问服务器,数据是否变化
let poling=()=>{
  let interval=setInterval(async()=>{
    let res=await api.queryOrderStatus(order_id)
    if(res.data.state){
        // 支付成功,就跳转到成功的界面,并且清掉缓存
        router.push('/pay/paySuccess')
        localStorage.removeItem(order_id)

    }
  },1500)
  return interval
}
let interval=poling()


// 页面写在的时候，清除定时器
onUnmounted(()=>{
    if(timeout){
        clearTimeout(timeout)
    }
    clearInterval(interval)
})

// 支付流程围绕2步
// 1.下单(预支付) 一般携带商品的id和商品的数量
// 2.发起支付 调用支付接口,传递订单id



</script>
<style scoped lang="scss">
.payment {
    background-color: #fff;
    padding: 5px 30px;
    box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
}

.main {
    display: flex;
    justify-content: center;
}

.top {
    padding: 5px 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .total_fee {
        margin-top: 10px;
    }
}

.title {
    margin: 10px 20px;

    b {
        font-size: 30px;
        display: inline-block;
        margin-right: 135px;
    }

    :deep(.icon) {
        vertical-align: text-bottom;
        width: 2em;
        height: 2em;
        margin-right: 10px;
    }
}

.pw-box-ft {
    height: 44px;
    padding: 8px 0 8px;
    background-image: linear-gradient(135deg, #4c67ff, #5635df);
    display: flex;

    justify-content: center;

    .qr-right {
        p {
            margin-right: 25px;
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            font-weight: 700;
        }
    }

    .icon {

        width: 3em;
        height: 3em;
    }
}




.right {
    width: 379px;
    height: 421px;
    padding-left: 50px;
    margin-top: -20px;
    background: url(../../../../assets/phone.png) 50px 0 no-repeat;
}
</style>